<!--父级页面:控制除了登录页以外所有页面共有的头部与左侧菜单栏-->
<template>
  <div style="width: 100%;height: 50px;background-color: #3e80ee;padding-top:10px ">
    <span style="color: #fff;font-size: 25px;font-weight: bold; margin-left: 30px;display: inline-block">医疗后台管理系统</span>
    <el-dropdown style="float: right;margin-right: 30px;">
      <span class="el-dropdown-link" style="color: #fff;display: inline-block;margin-top: 10px">
        {{user.username}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
     </template>
    </el-dropdown>
  </div>
  <div style="display: flex;margin-top: 2px">
    <div style="width:180px">
      <el-menu
          background-color="#3c82f5"
          style="width:100%;height:100vh;"
          text-color="#fff"
          active-text-color="#ff0"
          :collapse="isCollapse"
          :collapse-transition="false"
          unique-opened router
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size:21px;"></el-icon><span>门诊信息管理</span>
          </template>
          <el-menu-item index="/awad">预约挂号</el-menu-item>
          <el-menu-item index="/home">医生就诊</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size:21px;"></el-icon><span>住院信息管理</span>
          </template>
          <el-menu-item index="/hosppm">住院患者管理</el-menu-item>
          <el-menu-item index="/bim">床位信息</el-menu-item>
          <el-menu-item index="/money">住院结算</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size:21px;"></el-icon><span>药品管理</span>
          </template>
          <el-menu-item index="/inventory">药品库存</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size:21px;"></el-icon><span>医院管理</span>
          </template>
          <el-menu-item index="/home">科室管理</el-menu-item>
          <el-menu-item index="/doctor">医生管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div :style="{width:'calc(100% - 180px)'}">
      <router-view/>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import router from "@/router";

const user = ref(getUser());
const logout = ()=>{
  if (confirm("确定退出登录吗？")){
    localStorage.removeItem("user");
    router.push("/login");
    user.value={};
  }

}
</script>